<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单列表</title>
    <link rel="stylesheet" href="css/myorder_list.css" />
     <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div class="container" id="app">
        <h1>我的订单列表</h1>
        <button  >未支付</button>
        <button >已支付</button>
        <button  >已取消</button>
        <table class="coupon-table">
          <thead>
            <tr>
              <th>订单编号</th>
              <th>商品名称</th>
              <th>商品图片</th>
              <th>商品价格</th>
              <th>订单价格</th>
              <th>下单时间</th>
              <th>订单状态</th>
              <th>使用优惠券</th>
              <th>优惠价格</th>
            </tr>
          </thead>
          <tbody>
         
            <tr v-for="(order,index) in orderList" >
              <td>{{order.orderNumber}}</td>
              <td>{{order.dishName}}</td>
              <td>
                  <img :src="order.dishImg">
              </td>
              <td>{{order.dishPrice}}</td>
              <td>{{order.orderPrice}}</td>
              <td>{{order.orderCreateTime}}</td>
              <td>
                  <span v-if="order.status === '0'"> 未支付 </span>
                  <span v-if="order.status === '1'"> 已支付 </span>
                  <span v-if="order.status === '2'"> 已取消 </span>
              </td>
              <td>{{order.couponName}}</td>
              <td>{{order.couponPrice}}</td>
            </tr>

          </tbody>
        </table>
        <div>
            <button v-show="current >1" @click="getAll(current-1)">上一页</button>
            当前是第{{current}}页，
            <button v-show="current!== pages" @click="getAll(current+1)">下一页</button>
            共有{{total}}条记录,共有{{pages}}页,
        </div>

    </div>

    <script>

        const vm = new Vue({
            el:"#app",
            data:{
                orderList:[],
                total:"",
                current:"",
                pages:""
            },
            mounted(){
                this.getAll(1)
            },
            methods:{
                getAll(pageNum){
                    axios.get("myorder/page/"+pageNum)
                        .then(response=>{
                            console.log(response.data)
                            this.orderList = response.data.records
                            this.total = response.data.total
                            this.current = response.data.current
                            this.pages = response.data.pages

                        })
                        .catch(error=>{
                            console.log(error)
                        })
                }
            }
        })

    </script>
</body>
</html>